import React, { useState } from 'react'
import { inject, observer } from 'mobx-react'
import './todolist.scss'

export default inject('todolist')(observer(props => {
  const [task, setTask] = useState('')
  const [status, setStatus] = useState(true)
  console.log( setStatus )
  const { todolist } = props

  // 添加任务
  const add = e => {
    if (e.keyCode === 13) {
      if (!e.target.value) return alert('请输入内容')
      todolist.getList({
        type: 'add',
        doning: {
          id: Date.now(),
          task
        }
      })
      setTask('')
    }
  }

  // 编辑任务
  const edit = (item, e) => {
    if (!e.target.value) return alert('请输入内容')
    todolist.getList({
      type: 'edit',
      doning: {
        id: item.id,
        task: e.target.value
      }
    })
  }

  // 删除任务
  const remove = item => {
    if (!item.id) return alert('缺少参数，无法删除')
    todolist.getList({
      type: 'remove',
      doning: {
        id: item.id,
      }
    })
  }

  // 获取到store中的list，将数据渲染到页面中去
  const renderDoning = () => {
    return todolist.list.map(item => (
      <li key={ item.id }>
        <input 
          type="checkbox"
          className='check'
        />
        <div className='edit-con'>
          <span 
            className='txt'
            style={ {display: status ? 'block' : 'none'} }
            onClick={ () => setStatus(status ? false : true) }
          >
            { item.task }
          </span>
          {/* 这里需要特别注意，这是受控表单，是由props控制，需要修改到store中的数据 */}
          <input 
            type="text"
            className='edit'
            value={ item.task }
            onChange={ e => edit(item, e) }
            style={ {display: !status ? 'block' : 'none'} }
            onBlur={ () => setStatus(status ? false : true) }
          />
        </div>
        <i 
          className='close'
          onClick={ () => remove(item) }
        >
          x
        </i>
      </li>
    ))
  }
  return (
    <div className="m-todolist">
      <input 
        type="text"
        className='todo-input'
        value={ task }
        onChange={ e => setTask(e.target.value) }
        onKeyUp={ add }
      />
      <ul className="content">
        { renderDoning() }
      </ul>
    </div>
  )
}))